import React from 'react';
import {Text, View, StyleSheet, FlatList, Image} from 'react-native';
import {connect, ConnectedProps} from 'react-redux';
// import {RootStackNavigation} from '@/navigator/index';
import {RootState} from '@/models/index';
import {IGuess} from '@/models/home';
import Touchable from './../../components/Touchable';
import Icon from '@/assets/iconfont/index';
const mapStateToProps = (state: RootState) => ({
  home: state.home,
});

const connector = connect(mapStateToProps);

type modelState = ConnectedProps<typeof connector>; //获取redux中数据的模型以供给组件方便调用

interface IProps extends modelState {
  // navigation: RootStackNavigation; //获取跳转路由之类参数
  namespace: string;
  goAlbum: (data: IGuess) => void;
}
const Guess = (props: IProps) => {
  const {home, dispatch, namespace, goAlbum} = props;
  const {guess} = home;
  const refreshGuess = () => {
    dispatch({
      type: namespace + '/fetchGuess',
    });
  };
  const renderItem = ({item}: {item: IGuess}) => {
    return (
      <Touchable
        style={styles.item}
        onPress={() => {
          goAlbum(item);
        }}>
        <Image style={styles.image} source={{uri: item.image}} />
        <Text numberOfLines={2}>{item.title}</Text>
      </Touchable>
    );
  };
  const keyExtractor = (item: IGuess) => {
    return item.id;
  };
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <Icon name="icon-xihuan" />
          <Text style={styles.headerTitle}>猜你喜欢</Text>
        </View>
        <View style={styles.headerRight}>
          <Text style={styles.moreText}>更多</Text>
          <Icon name="icon-more" />
        </View>
      </View>
      <FlatList
        style={styles.list}
        numColumns={3}
        data={guess}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
      <Touchable
        style={styles.changeGuess}
        onPress={() => {
          refreshGuess();
        }}>
        <Icon name="icon-huanyipi" color="red" />
        <Text style={styles.changeGuessText}>换一批</Text>
      </Touchable>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
    borderRadius: 8,
    margin: 16,
  },
  item: {
    flex: 1,
    marginVertical: 6,
    marginHorizontal: 10,
  },
  image: {
    width: '100%',
    height: 100,
    borderRadius: 8,
    marginBottom: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15,
    borderBottomColor: '#efefef',
    borderBottomWidth: StyleSheet.hairlineWidth, //经过计算的1px细线
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerTitle: {
    marginLeft: 5,
    color: '#333',
  },
  headerRight: {
    flexDirection: 'row',
  },
  moreText: {
    color: '#6f6f6f',
  },
  changeGuess: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  changeGuessText: {
    marginLeft: 5,
  },
  list: {
    padding: 10,
  },
});
export default connector(Guess);
